<script setup lang="ts">
import { PropType } from 'vue'
import { useSettingStore } from '@/store/modules/setting'
interface CommandListType {
  title: string
  image: string
  selectedImage: string
  animationData: string
}

const $props = defineProps({
  currentTab: {
    type: String,
    default: '首页',
  },
  commandList: {
    type: Object as PropType<CommandListType[]>,
    default() {
      return []
    },
  },
})
const $emit = defineEmits(['change'])
const $settingStore = useSettingStore()

/*
 *functions
 */
const changeHandle = (title: string, index: number) => {
  $settingStore.SET_CUR_SWIPER_INDEX(index)
  $emit('change', { title, index })
}
</script>

<template>
  <view class="tabbar">
    <view v-for="(item, index) in $props.commandList" :key="item.title" class="tabbar__item" @click="changeHandle(item.title, index)">
      <!-- <image :src="item.title === $props.currentTab ? item.selectedImage : item.image" mode="aspectFill" class="tabbar__item--img"></image> -->
      <view :class="['tabbar__item--title', item.title === $props.currentTab && 'is-choosed']">{{ item.title }}</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@include b(tabbar) {
  box-sizing: border-box;
  width: 100%;
  padding: 0 10rpx;
  height: 140rpx;
  position: fixed;
  bottom: 0;
  z-index: 98;
  background: #fff;
  @include flex(space-between);
  @include e(item) {
    display: flex;
    flex-direction: column;
    align-items: center;
    @include m(img) {
      width: 80rpx;
      height: 80rpx;
      border: 1px solid;
    }
    @include m(title) {
      font-size: 24rpx;
    }
  }

  @include when(choosed) {
    color: red;
  }
}
</style>
